<template>
    <div class="login">
        <!--顶部大包围-->
        <div class="login_container_top">
            <span>登录</span>
            <span @click="$router.push('/shop/regedit')">门店注册 ></span>
        </div>
        <!--输入框-->
        <div class="login_input">
            <van-cell-group>
                <van-field v-model="user.name" clearable label="用户名" placeholder="请输入用户名"/>
                <van-field v-model="user.password" clearable :type="state.type" label="密码" placeholder="请输入密码"
                           :right-icon="state.showPassword" @click-right-icon="changePasswordMode"/>
            </van-cell-group>
        </div>
        <!--忘记密码选项-->
        <div class="login_forgot_password" @click="$router.push('/public/forgotPassWord')">
            <span>忘记密码?</span>
        </div>
        <!--立即登录-->
        <div class="login_immediately">
            <van-button @click="eventClickUserLogin" type="primary"
                        class="green-background font-size-17 edge-angle-normal">立即登录
            </van-button>
        </div>
    </div>
</template>

<script>
    import {Field, Icon, Button, CellGroup} from 'vant';

    export default {
        name: "login",
        components: {
            [Field.name]: Field, [Icon.name]: Icon, [Button.name]: Button, [CellGroup.name]: CellGroup
        },
        data() {
            return {
                state: {
                    type: 'password', // 密码框模式
                    showPassword: 'closed-eye' // 控制眼睛的睁开的闭合
                },
                user: {
                    name: '',
                    password: '',
                    openid: 'shadow'
                } // 账号和密码的存储
            }
        },
        mounted() {
            this.user.openid = window.sessionStorage.getItem('OpenId') || 'shadow';
            //检查用户身份
            this.$store.dispatch('options/checkUserIdentity', {
                callBack: (res) => {
                    // console.log(res)
                },
                success: (res) => {
                    this.controllerJumpToUserHome(res);
                }
            });
        },
        methods: {
            //控制眼睛和密码框的显隐
            changePasswordMode() {
                if (this.state.type == 'password') {
                    this.state.type = 'text';
                    this.state.showPassword = 'eye-o';
                } else {
                    this.state.type = 'password';
                    this.state.showPassword = 'closed-eye';
                }
            },
            //点击登录
            eventClickUserLogin() {
                // var url = '/api/wechat/index',
                //     params = {};

                // this.$util.getRequestInterface(url, params, (res) => {
                //     if(res.data) {
                //         this.user.openid = res.data;
                this.requestUserLoginOperate();
                //     }
                // });
            },
            requestUserLoginOperate() {
                console.log('OpenId ',window.localStorage.getItem("OpenId"),this.user.openid)
                var url = 'http://192.168.1.50:9011/api/login',
                    params = {
                        name: this.user.name,
                        pwd: this.user.password,
                        openid:window.localStorage.getItem("OpenId")|| this.user.openid
                        //                            openid: this.$route.query.openid

                    };

                this.$store.dispatch('options/userLoadingOperate', {
                    url,
                    data: params,
                    callBack: (res) => {
                        console.log(res)
                        this.controllerJumpToUserHome(res.data.userInfo);
                    }
                });
            },
            controllerJumpToUserHome(user) {
                if (user.groupid == 1) {
                    this.$router.push('/shop/index');
                } else if (user.groupid == 2) {
                    this.$router.push('/salesman/index');
                } else if (user.groupid == 3) {
                    this.$router.push('/temporaryDirector/index');
                } else if (user.groupid == 4) {
                    this.$router.push('/GeneralRepository/index');
                } else if (user.groupid == 5) {
                    this.$router.push('/reservoirManagement/index');
                } else if (user.groupid == 6) {
                    this.$router.push('/accounting/index');
                } else if (user.groupid == 7) {
                    this.$router.push('/SuperAdmin/index');
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    /*border-bottom: 1px solid #ebedf0;*/
    .login {
        /*顶部*/
        .login_container_top {
            width: 90%;
            margin: 3rem auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                &:nth-child(1) {
                    font-size: 2.2rem;
                    color: #333333;
                    font-weight: bold;
                }

                &:nth-child(2) {
                    font-size: 1.4rem;
                    color: #666666;
                    font-weight: 500;
                }
            }
        }

        /*账号密码输入框*/
        .login_input {
            width: 90%;
            margin: 0 auto;

            .van-cell {
                border-bottom: 1px solid #ebedf0;
            }
        }

        /*忘记密码选项*/
        .login_forgot_password {
            width: 90%;
            margin: 1rem auto;
            text-align: right;

            span {
                font-size: 1.3rem;
                font-weight: 500;
                color: #999999;
            }
        }

        /*立即登录按钮*/
        .login_immediately {
            width: 92%;
            margin: 2rem auto;

            .van-button {
                width: 100%;
            }
        }
    }
</style>
